import Contact from '@/components/Contact';
import { Flex } from 'antd';
import { useIntl } from 'umi';
import './index.less';
const CommonItem: React.FC = () => {
  const intl = useIntl();
  const list = ['+852 2307 1122', '+852 2307 1122', 'service@xlend.hk'];
  const isEn = intl.locale == 'en-US';

  return (
    <div style={{ background: '#034FE6', padding: '25px 0' }}>
      <div className="common">
        <Flex justify="space-between" gap={70}>
          <div style={{ width: 447 }}>
            <Contact
              bottomWord={
                <div>
                  {intl.formatMessage(
                    { id: 'home.contact_submit3' },
                    {
                      time: (
                        <span style={{ fontWeight: 'bold', color: '#123ba4' }}>
                          {intl.formatMessage({ id: 'home.contact_minute' })}
                        </span>
                      ),
                    },
                  )}
                </div>
              }
              title={
                <div
                  style={{
                    fontSize: isEn ? 12 : 20,
                    fontWeight: 'bold',
                    marginBottom: 9,
                    textAlign: 'left',
                    display: !isEn ? 'flex' : 'block',
                  }}
                >
                  {intl.formatMessage({ id: 'home.need_loan' })}
                  <div> {intl.formatMessage({ id: 'home.need_loan1' })}</div>
                </div>
              }
              needTop={false}
              className="a_contact_modal"
            />
          </div>
          <div style={{ flex: 1, color: '#fff' }}>
            <div
              style={{
                display: !isEn ? 'flex' : 'block',
                fontSize: isEn ? 26 : 40,
                fontWeight: 'bold',
                lineHeight: isEn ? '30px' : '60px',
              }}
            >
              {intl.formatMessage({ id: 'home.match.help_title1' })}
              <div>{intl.formatMessage({ id: 'home.match.help_title2' })}</div>
            </div>
            <div
              style={{
                fontSize: isEn ? 25 : 24,
                margin: '16px 0',
                textIndent: isEn ? 0 : '2em',
                lineHeight: isEn ? '29px' : '32px',
              }}
            >
              {intl.formatMessage({ id: 'home.match.help_word' })}
            </div>
            <div style={{ fontSize: 18 }}>
              {intl.formatMessage({ id: 'home.match.help_word1' })}：
            </div>
            <div style={{ margin: '8px 0 21px', fontSize: 16, lineHeight: '22px' }}>
              <div>{intl.formatMessage({ id: 'home.match.help_word2' })}：9:00 AM- 8:00 PM</div>
              <div>{intl.formatMessage({ id: 'home.match.help_word3' })}：10:00 AM-6:00 PM</div>
            </div>
            <Flex gap={14}>
              {list.map((item, index) => {
                return (
                  <div
                    // eslint-disable-next-line react/no-array-index-key
                    key={index}
                    style={{
                      borderRadius: 8,
                      backgroundColor: '#c3ddff',
                      padding: '8px 18px',
                      lineHeight: '25px',
                      color: '#034fe6',
                    }}
                  >
                    <div>{intl.formatMessage({ id: `home.match.help_way${index + 1}` })}：</div>
                    <div>{item}</div>
                  </div>
                );
              })}
            </Flex>

            <div style={{ color: '#FFFFFF80', marginTop: 23, lineHeight: '20px' }}>
              {intl.formatMessage({ id: 'home.match.help_time' })}
            </div>
          </div>
        </Flex>
      </div>
    </div>
  );
};

export default CommonItem;
